<script setup lang="ts">
  import { PropType, reactive, ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { saveOrUpdateLocation } from '@/api/les';
  import { Notification } from '@arco-design/web-vue';
  import { LocationTypeOption } from '@/api/les/types';

  import { getName } from '@/utils/auth';

  const props = defineProps({
    locationTypeOptions: Array as PropType<LocationTypeOption[]>,
    areaOptions: Array as PropType<LocationTypeOption[]>,
  });

  const showDrawer = ref<boolean>(false);
  const formRef = ref<any>('');
  const booleanStore = useBooleanStore();
  const title = ref<string>('AGV调度库位');
  const isShowOccupiedCode = ref(true);

  const formModel = reactive({
    id: undefined,
    code: '',
    type: undefined,
    area: undefined,
    tierLoc: '',
    columnLoc: '',
    rowLoc: '',
    ledCode: '',
    isOccupied: 0,
    occupiedCode: '',
    port: '',
    part: '',
    inboundDate: '',
    outboundDate: '',
    createUser: '',
    updateUser: '',
  });

  function typeChange(val: any) {
    if (val === 6 || val === 12) {
      isShowOccupiedCode.value = false;
      formModel.occupiedCode = '';
    } else {
      isShowOccupiedCode.value = true;
    }
  }

  // 监听弹框
  watch(
    () => booleanStore.boolValue,
    (newValue: boolean) => {
      if (!newValue) {
        showDrawer.value = newValue;
        return;
      }
      if (booleanStore.num === 101) {
        title.value = '新增AGV调度库位';
        showDrawer.value = newValue;
      } else if (booleanStore.num === 102) {
        title.value = '修改AGV调度库位';
        formModel.id = booleanStore.row.id;
        formModel.code = booleanStore.row.code;
        formModel.type = booleanStore.row.type;
        formModel.area = booleanStore.row.area;
        formModel.tierLoc = booleanStore.row.tierLoc;
        formModel.columnLoc = booleanStore.row.columnLoc;
        formModel.rowLoc = booleanStore.row.rowLoc;
        formModel.ledCode = booleanStore.row.ledCode;
        formModel.occupiedCode = booleanStore.row.occupiedCode;
        formModel.port = booleanStore.row.port;
        formModel.part = booleanStore.row.part;
        typeChange(booleanStore.row.type);
        showDrawer.value = newValue;
      }
    }
  );

  const rules = {
    code: [
      {
        required: true,
        message: '请输入库位编码',
      },
    ],
    type: [
      {
        required: true,
        message: '请选择库位类型',
      },
    ],
    area: [
      {
        required: true,
        message: '请选择库区',
      },
    ],
    tierLoc: [
      {
        required: true,
        message: '请输入库位层',
      },
    ],
    columnLoc: [
      {
        required: true,
        message: '请输入库位列',
      },
    ],
    rowLoc: [
      {
        required: true,
        message: '请输入库位排',
      },
    ],
    port: [
      {
        required: true,
        message: '请输入站点地址',
      },
    ],
  };

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool(101);
    }
  }

  function handleCancel() {
    formRef.value?.resetFields();
    booleanStore.toggleBool(101);
  }

  async function handleOk(done: any) {
    const res = await formRef.value.validate();
    if (res) {
      showDrawer.value = true;
    } else {
      if (title.value === '新增牵引车与母车库位')
        formModel.createUser = getName() as string;
      else formModel.updateUser = getName() as string;
      const data = await saveOrUpdateLocation(formModel);
      if (data.retCode === '200') {
        Notification.success({
          title: '成功',
          content: data.message,
          closable: true,
        });
        booleanStore.toggleBool(101);
        booleanStore.watchUpdate(102);
        Object.assign(formModel, {
          id: undefined,
          code: '',
          type: undefined,
          area: undefined,
          tierLoc: '',
          columnLoc: '',
          rowLoc: '',
          ledCode: '',
          isOccupied: 0,
          occupiedCode: '',
          port: '',
          part: '',
          inboundDate: '',
          outboundDate: '',
        });
      } else {
        showDrawer.value = true;
        Notification.error({
          title: '失败',
          content: data.message,
          closable: true,
        });
      }

      done();
    }
  }
</script>

<template>
  <a-drawer
    v-model:visible="showDrawer"
    placement="right"
    width="35%"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <template #title> {{ title }} </template>
    <a-form ref="formRef" :model="formModel" :rules="rules">
      <a-form-item label="库位编码" field="code">
        <a-input
          v-model="formModel.code"
          max-length="20"
          allow-clear
          placeholder="请输入库位编码"
        />
      </a-form-item>
      <a-form-item label="库位类型" field="type">
        <a-select
          v-model="formModel.type"
          placeholder="请选择库位类型"
          allow-clear
          :options="props.locationTypeOptions"
          @change="typeChange"
        ></a-select>
      </a-form-item>
      <a-form-item label="库区" field="area">
        <a-select
          v-model="formModel.area"
          placeholder="请选择库区"
          allow-clear
          :options="props.areaOptions"
        ></a-select>
      </a-form-item>
      <a-form-item label="层" field="tierLoc">
        <a-input
          v-model="formModel.tierLoc"
          max-length="50"
          allow-clear
          placeholder="请输入库位层"
        />
      </a-form-item>
      <a-form-item label="列" field="columnLoc">
        <a-input
          v-model="formModel.columnLoc"
          max-length="50"
          allow-clear
          placeholder="请输入库位列"
        />
      </a-form-item>
      <a-form-item label="排" field="rowLoc">
        <a-input
          v-model="formModel.rowLoc"
          max-length="50"
          allow-clear
          placeholder="请输入库位排"
        />
      </a-form-item>
      <a-form-item v-if="formModel.type === 3" label="LED编码" field="ledCode">
        <a-input
          v-model="formModel.ledCode"
          max-length="50"
          allow-clear
          placeholder="请输入LED编码"
        />
      </a-form-item>
      <a-form-item
        label="占用编码"
        v-if="isShowOccupiedCode"
        field="occupiedCode"
      >
        <a-input
          v-model="formModel.occupiedCode"
          max-length="50"
          allow-clear
          placeholder="请输入占用编码"
        />
      </a-form-item>
      <a-form-item label="站点地址" field="port">
        <a-input
          v-model="formModel.port"
          max-length="50"
          allow-clear
          placeholder="请输入站点地址"
        />
      </a-form-item>
      <a-form-item label="分区" field="part">
        <a-input
          v-model="formModel.part"
          max-length="50"
          allow-clear
          placeholder="请输入分区"
        />
      </a-form-item>
    </a-form>
    <!-- <template #footer>
      <div class="flex-btn">
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button class="btn-reset" @click="handleCancel">取消</a-button>
      </div>
    </template> -->
  </a-drawer>
</template>
